<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记账号</title>
    <link rel="stylesheet" href="./button.css">
    <style>
        body {
            background-image: url(../login_picture/background.jpg);
        }

        * {
            margin: 0;
            height: 0;
            box-sizing: border-box;
        }

        .log_tips {
            width: 100%;
            height: 100px;
        }

        .login_wrap {
            width: 100%;
            height: 500px;
            margin-top: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .link {
            width: 100%;
            height: 100px;

        }

        #login {
            width: 400px;
            height: 300px;
            background-color: rgb(38, 93, 125);
            opacity: 0.7;
            border-radius: 10px;

        }

        form {
            margin: 20px 0;
            width: 100%;
            height: 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            /* background-color: black; */
        }

        form>input {
            padding: 9px 10px;
            width: 300px;
            height: 34px;
            border-radius: 5px;
            opacity: 0.5;
        }

        form>button {
            width: 200px;
            height: 38px;
            border-radius: 50px;
            /* background-color: coral; */
            background: linear-gradient(280deg, rgb(240, 11, 11), rgb(247, 14, 14));
            color: #fff;
            outline: none;
        }

        .login_links {

            text-align: center;
        }

        .login_links a {
            text-decoration: none;
            color: #fff;
            display: inline-block;
            width: 120px;
            height: 30px;

        }
    </style>
</head>

<body>
    <div class="login_wrap">
        <div id="login">
            <form action="">
                <input type="text" placeholder="身份证号">
                <input type="text" placeholder="真实姓名">
                <a href="javascript:;" class="aki-btn">
                    <span>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定</span>
                </a>
            </form>
            <div class="login_links">
                <a href="./login.html">以有账号?去登录</a>
            </div>
        </div>
    </div>
    <div class="link"></div>
</body>
<script>
    let iptID = document.querySelector('form input:nth-of-type(1)')
    let iptName = document.querySelector('form input:nth-of-type(2)')
    let btn = document.querySelector('.aki-btn')
    let reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
    let regName = /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/
    btn.addEventListener('click', function () {
        let ID = iptID.value
        let name = iptName.value
        let strID = '身份证号码有效'
        let strName = "姓名有效"
        if (!reg.test(ID)) {
            strID = "份证号码无效"
        }
        if (!regName.test(name)) {
            strName = "姓名无效"
        }
        alert(` ${ID}:${strID},${name}:${strName}`)
    })
</script>

</html>